<template>
  <div class="content">
    <h1 class="title"><i class="fas fa-money-bill-wave"></i> 财务统计</h1>

    <div class="summary-cards">
      <div class="card">
        <h3>今日收入</h3>
        <p>¥ {{ todayIncome }}</p>
      </div>
      <div class="card">
        <h3>本月收入</h3>
        <p>¥ {{ monthIncome }}</p>
      </div>
      <div class="card">
        <h3>本年收入</h3>
        <p>¥ {{ yearIncome }}</p>
      </div>
    </div>

    <h2 class="sub-title">收入记录</h2>
    <table class="data-table">
      <thead>
        <tr>
          <th>日期</th>
          <th>类型</th>
          <th>金额</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(record, index) in incomeRecords" :key="index">
          <td>{{ record.date }}</td>
          <td>{{ record.type }}</td>
          <td>¥ {{ record.amount }}</td>
          <td>{{ record.note }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'FinanceReport',
  computed: {
    totalIncome() {
      return this.$store.getters.totalIncome
    },
    incomeRecords() {
      return this.$store.getters.incomeRecords
    },
    todayIncome() {
      const today = new Date().toISOString().split('T')[0]
      return this.incomeRecords.filter(record => record.date === today).reduce((sum, record) => sum + record.amount, 0)
    },
    monthIncome() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return this.incomeRecords.filter(record => record.date.startsWith(`${year}-${month}`)).reduce((sum, record) => sum + record.amount, 0)
    },
    yearIncome() {
      const year = new Date().getFullYear()
      return this.incomeRecords.filter(record => record.date.startsWith(year.toString())).reduce((sum, record) => sum + record.amount, 0)
    }
  }
}
</script>

<style scoped>
.content {
  margin-left: 240px;
  padding: 40px;
  background-color: #f4f6f9; /* 更高级的背景颜色 */
}

.title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.summary-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.card h3 {
  margin-top: 0;
  color: #666;
  font-size: 18px;
}

.card p {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0;
  color: #333;
}

.sub-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.data-table th,
.data-table td {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.data-table th {
  background-color: #f2f2f2;
  font-weight: 600;
}
</style>